<template>
  <div class="edit-container">
    <!--表单容器-->
    <el-form ref="formRef" :model="formData" :rules="newsRules" label-width="100px" label-position="top"
      class="edit-form">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入文章标题" clearable />
      </el-form-item>
      <el-form-item label="文章类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择分类" style="width:100%">
          <el-option v-for="item in typeoptions" :key="item.hid" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="文章内容" prop="article">
        <el-input v-model="formData.article" type="textarea" :rows="8" placeholder="请输入文章内容!" clearable />
      </el-form-item>
      <el-form-item>
        <el-button @click="handlerCancel">取消</el-button>
        <el-button type="primary" @click="handlersave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script setup>
import { ref, reactive ,onMounted } from 'vue'
import {getFindAllTypes,getFindHeadlineByHid,issueNews,isUserOverdue, saveOrAddNews} from '@/api/index'
import { useRoute,useRouter } from 'vue-router'
import { findNewsTypeByTname } from '@/untils/business'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const formRef = ref()

const formData = ref({
  hid: null,
  title: '',
  type: '',
  article: ''
})

const typeOptions = ref([])

const newsRules = reactive({
  title:[
    {required:true,message:'标题不能为空',trigger:'blur'},
    {min:5,max:50,message:'长度需要再5-50个字符',trigger:'blur'}
  ],
  type:[
    {required:true,message:'标题不能为空',trigger:'change'}
  ],
  article:[
  { required:true,message:'内容不能为空',trigger:'blur'},
  { min:10,message:'内容至少10个字符',trigger:'blur' }
  ]
})

onMounted(()=>{
  getNews()
})

const getNews = async ()=>{
  let ret = await getFindAllTypes()
  ret.forEach((item)=>{
    let obj = {}
    obj.tid = item.tid
    obj.value = item.tid
    obj.label = item.tname
    typeOptions.value.push(obj)
  })
  clickModifyEcho()
}

// 如果点击修改新闻，会携带一个hid 查询新闻信息
const clickModifyEcho = async() => {
  if(!route.query.hid) return 
  let ret = await getFindHeadlineByHid(route.query.hid)
  formData.value.hid = ret.headline.hid
  formData.value.title =ret.headline.title
  formData.value,article =ret.headline.article

  // 根据type类型，找到对应的行文类别名称
  typeoptions.value.forEach((item)=>{
    if(ret.headline.type == item.tid){
      formData.value.type = item.value
    }
  })
}

// 新闻保存
const handlerSave = async() => {
  await formRef.value?.validate()
  // 修改的用户token是否过期
  await isUserOverdue()
  const obj = {...formData.value}
  obj.hid = route.query.hid
  // 新闻类型，将中文转化为数字
  obj.type = findNewsTypeByTname(obj.type,typeOptions.value)
  if(route.query.hid){
    // 修改新闻
    await saveOrAddNews(formData.value)
    console.log("修改新闻")
    ElMessage.success("修改新闻成功")
  }else{
    // 发布新闻
    await issueNews(formData.value)
    console.log("发布新闻")
    ElMessage.success("发布新闻成功")
  }
}

// 返回上一页
const handlerCancel = () => {
  router.back()
}
</script>

<style lang='less' scoped>
.edit-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .edit-form {
    padding: 20px;
  }
}
</style>